<template>
  <div class="app-container">
    <el-steps :active="active" align-center>
      <el-step title="编辑课程基本信息" />
      <el-step title="编辑课程大纲" />
      <el-step title="课程最终发布" />
    </el-steps>
    <el-form
      ref="form"
      label-position="right"
      label-width="120px"
      :model="formData"
      @submit.native.prevent
    >
      <el-form-item label="名称">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="销售价格">
        <el-input v-model="formData.price" type="number" />
      </el-form-item>
      <el-form-item label="总课时">
        <el-input v-model="formData.lessonNum" type="number" />
      </el-form-item>
      <el-form-item label="课程科目">
        <el-cascader
          placeholder="请选择"
          v-model="formData.subjectIdArray"
          :options="subjectOptions"
          :props="{ checkStrictly: true, expandTrigger: 'hover' }"
          clearable
          :show-all-levels="false"
          filterable
          :filter-method="subjectFilter"
          @change="subjectChange"
        />
      </el-form-item>
      <el-form-item label="教师">
        <el-select v-model="formData.teacherId" filterable placeholder="请选择">
          <el-option
            v-for="item in teacherOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="简介">
        <mavon-editor
          ref="editor"
          :value="formData.description"
          @save="saveDoc"
          @change="updateDoc"
          @imgAdd="addImgDoc"
        />
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
          class="avatar-uploader"
          :action="uploadCoverAction"
          :show-file-list="false"
          :on-success="uploadSuccess"
        >
          <img
            v-if="formData.coverUrl"
            :src="formData.coverUrl"
            class="avatar"
          >
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item size="large">
        <el-button
          style="margin-top: 12px"
          @click="next"
        >保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import subject from '@/api/edu/subject'
import teacher from '@/api/edu/teacher'
import course from '@/api/edu/course'
import { mavonEditor } from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

export default {
  components: { mavonEditor },
  data() {
    return {
      formData: {
        id: '',
        title: '',
        price: '',
        lessonNum: '',
        teacherId: '',
        cover: '',
        coverUrl: '',
        subjectId: '',
        description: '',
        subjectIdArray: []
      },
      subjectOptions: [],
      teacherOptions: [],
      active: 0,
      uploadCoverAction:
        process.env.VUE_APP_BASE_API + '/service_oss/oss/upload'
    }
  },
  created() {
    this.getTeacherOptions()
    this.getSubjectOptions()
    if (this.$route.params && this.$route.params.id) {
      this.formData.id = this.$route.params.id
      course.getCourse(this.formData.id).then((res) => {
        this.formData = res.data.result
      })
    }
  },
  methods: {
    // 获取老师下拉菜单
    getTeacherOptions() {
      teacher.getAllForSelect().then((res) => {
        this.teacherOptions = res.data.result
      })
    },
    // 获取科目下拉菜单
    getSubjectOptions() {
      subject.getAll().then((res) => {
        this.subjectOptions = res.data.result
      })
    },
    next() {
      // 跳转到第二步
      this.saveOrUpdate()
    },
    // 提交表单
    save() {
      course.addCourseInfo(this.formData).then((res) => {
        this.formData.id = res.data.courseId
        this.$router.push({ path: '/course/chapter/' + this.formData.id })
        this.$message({
          type: 'success',
          message: '成功'
        })
      })
    },
    update() {
      course.updateCourseInfo(this.formData).then((res) => {
        this.$router.push({ path: '/course/chapter/' + this.formData.id })
        this.$message({
          type: 'success',
          message: '成功'
        })
      })
    },
    saveOrUpdate() {
      if (this.formData.id) {
        this.update()
      } else {
        this.save()
      }
    },
    // 上传封面成功后触发
    uploadSuccess(res) {
      this.formData.cover = res.data.key
      this.formData.coverUrl = res.data.url
    },
    // 科目搜索时触发
    subjectFilter(node, keyword) {
      return node.label.toLowerCase().indexOf(keyword.toLowerCase()) !== -1
    },
    // 科目变更时触发
    subjectChange(item) {
      const len = item.length
      this.formData.subjectId = item[len - 1]
    },
    // 富文本更新
    updateDoc(markdown, html) {
      // 此时会自动将 markdown 和 html 传递到这个方法中
      console.log(html)
      this.formData.description = markdown
    },
    // 富文本保存
    saveDoc(markdown, html) {
      // 此时会自动将 markdown 和 html 传递到这个方法中
      console.log(html)
      this.formData.description = markdown
    },
    // 富文本添加图片
    addImgDoc(filename, file) {
      console.log(filename, file)
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
